<!--修改新闻组件-->
<template>
  <el-container>
    <el-main>
      <div class="news">
        <el-form ref="editFormRef" :model="editForm" :rules="editFromRules" label-width="100px">
          <el-form-item label="新闻标题">
            <el-input v-model="editForm.title" />
          </el-form-item>
          <el-form-item label="发布时间">
            <el-input v-model="editForm.releaseTime" />
          </el-form-item>
          <el-form-item label="新闻简介">
            <el-input v-model="editForm.summary" />
          </el-form-item>
           <el-form-item label="关键字">
            <el-input v-model="editForm.keyword " />
          </el-form-item>
          <el-form-item label="封面图片">
            <input type="file" name="myfiles" />
          </el-form-item>
        </el-form>
      </div>
      <el-form label-width="100px">
        <el-form-item label="新闻内容" style="margin-bottom:0px;"></el-form-item>
      </el-form>
      <div id="editor"></div>
      <!-- <div class="text"> -->
      <!--  </div> -->
      <el-form>
        <!--按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary" @click="editForm_send">发布</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import E from 'wangeditor'
export default {
  data() {
    return {
      // 查询到的用户信息对象
      editForm: {},
      // 修改表单的验证规则对象
      editFromRules:{
                title: [
                    { required: true, message: "请输入标题信息", trigger: "blur" }
                ],
               releaseTime: [
                    { required: true, message: "请输入发布时间", trigger: "blur" }
                ]
      },
      editor: '',
      allData:{}
    }
  },
  mounted() {
    this.getData()
    this.editor = new E('#editor') //new即可 //change事件，当富文本编辑器内容发生变化时便会触发此函数
    this.editor.customConfig.onchange = function (text) {
      /* console.log(text) */
    }
    //以上配置完成之后调用其create()方法进行创建
    this.editor.customConfig.uploadImgServer =
      'http://dl.sword.ink:2334/upload/picture' 
    //必要设置，值必须为“myfiles”
    this.editor.customConfig.uploadFileName = 'myfiles' 
    // 图片最大体积为20MB
    this.editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024 
    //超时时间要设置长一点，否则大图片上传可能失败，默认为10秒，这里设置为30秒
    this.editor.customConfig.uploadImgTimeout = 30000
    this.editor.create() 
    //创建完成之后的默认内容
    this.editor.txt.html('<p>欢迎使用wangEditor编辑器</p >') 
  },
  methods: {
    getData() {
      const that = this
      this.allData = that.$route.params.info
      this.editForm = this.allData
      console.log(this.allData)
    },
      editForm_send() {
      console.log(this.editForm)
      this.$refs.editFormRef.validate(async valid => {
      if (!valid) return
      const {data: res} = await this.$http.put('/news?id='+this.editForm.id+'&title='+this.editForm.title+'&releaseTime='+this.editForm.releaseTime+
             '&updateTime='+this.editForm.updateTime+'&content='+this.editForm.conent+'&summary='+this.editForm.summary+'&keyword='+this.editForm.keyword+
             '&views'+this.editForm.views+'&pictrue'+this.editForm.pictrue)
      if(res.state !== true){
        return this.$message.error(res.msg)
      }
      return this.$message.success(res.msg)
    })
  }
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  height: 500px;
}
.news {
  height: auto;
  width: 100%;
}
.text {
  width: 100%;
  height: 50vh;
  border: 2px solid aqua;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
